<template>
    <div class="mod-config">
      <div class="div-tabs">
        <div class="div-tabs-item " :class="{'div-tabs-active':tabIs('enterprise')}" @click="clickTabChange('enterprise')"><span >企业客户</span></div>
        <div class="div-tabs-item" :class="{'div-tabs-active':tabIs('personal')}" @click="clickTabChange('personal')"><span >个人客户</span></div>
      </div>
      <ent-add-or-update v-if="tabIs('enterprise')" :isAdd="isAdd" :componentFlag="componentFlag"></ent-add-or-update>
      <personal-add-or-update v-if="tabIs('personal')" :isAdd="isAdd" :componentFlag="componentFlag"></personal-add-or-update>
    </div>
</template>

<script>
import EntAddOrUpdate from './enterpriseCustomer/ent-add-or-update'
import PersonalAddOrUpdate from './personalCustomer/personal-add-or-update'
export default {
  name: 'add',
  components: {PersonalAddOrUpdate, EntAddOrUpdate},
  props: {
    isAdd: {
      type: Boolean,
      default: true
    },
    componentFlag: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // tabs切换FLag enterprise,personal
      tabsFlag: 'enterprise'
    }
  },
  methods: {
    tabIs (tabsFlag) {
      return this.tabsFlag === tabsFlag
    },
    // 标签点击事件
    clickTabChange (tab) {
      this.tabsFlag = tab
    }
  },
  changeComponent (to) {
    // this.$emit('changeComponent', 'potential-clients')
    this.$emit('changeComponent', to)
  }
}
</script>

<style lang='less' scoped>
.mod-config {
  padding: 15px !important;
  background-color: #F5F7FA !important;
}

.div-e {
  width: 100%;
  background-color: #FFFFFF;
  padding: 15px;

}
.in-ts {
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}

.in-t {
  margin-bottom: 15px;
}

.div-tabs {
  display: flex;
.div-tabs-item{
  width: 112px;
  height: 36px;
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  background-color:#E8E8E8 ;

}
.div-tabs-item:hover{
  cursor:pointer
}
.div-tabs-item:first-child{
  border-top-left-radius: 8px;
}
.div-tabs-item:nth-last-child(1){
  border-top-right-radius: 8px;
}
}
.div-tabs-active {
  background-color: #FFFFFF !important;
}
</style>
